<template>
  <div id="home" class="dashboard-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>个人信息</span>
      </div>
      <div class="text item">
        <div class="InfoList">
          <span class="textItem">用户名</span> : <span class="textValue">{{ !!updateInfo.orgName ? updateInfo.orgName : '-' }}</span>
        </div>
        <div class="InfoList">
          <span class="textItem">邮箱</span> : <span
          class="textValue">{{ !!updateInfo.email ? updateInfo.email : '-'  }}</span>
        </div>
        <div class="InfoList">
          <span class="textItem">电话</span> : <span
          class="textValue">{{ !!updateInfo.phone ? updateInfo.phone : '-'}}</span>
        </div>
      </div>
      <div class="button-group">
        <el-button style="margin-right:20px;" type="primary" size="mini" @click="infoFormVisible = true">修改资料
        </el-button>
        <el-button type="primary" size="mini" @click="pwdFormVisible = true">修改密码</el-button>
      </div>
      <div class="footer clearfix">
        <div class="item">
          <div class="item-left"><i class="fa fa-map-o"></i></div>
          <div class="item-right">
            <p>未接收数据批次</p>
            <span class="num">{{ staticData['noReceiveNo'] }}</span>
          </div>
        </div>
        <div class="item">
          <div class="item-left"><i class="fa fa-map-o"></i></div>
          <div class="item-right">
            <p>未读数据批次</p>
            <span class="num">{{ staticData['noreadNo'] }}</span>
          </div>
        </div>
      </div>
    </el-card>

    <el-dialog @close="cancledialog('userForm')" width="400px" title="修改资料" :visible.sync="infoFormVisible">
      <el-form :model="updateInfo" :rules="userRules" ref="userForm">
        <el-form-item label="用户名" prop="orgName" :label-width="formLabelWidth">
          <el-input v-model.sync.trim="updateInfo.orgName" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email" :label-width="formLabelWidth">
          <el-input v-model.sync.trim="updateInfo.email" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone" :label-width="formLabelWidth">
          <el-input v-model.trim="updateInfo.phone" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="infoFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="update('userForm')">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog @close="cancledialog('pwdForm')" width="400px" title="修改密码" :visible.sync="pwdFormVisible">
      <el-form :model="pwdData" :rules="pwdRules" ref="pwdForm">
        <el-form-item label="原始密码" prop="oldPwd" :label-width="formLabelWidth">
          <el-input v-model.sync="pwdData.oldPwd" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="password" :label-width="formLabelWidth">
          <el-input v-model.sync="pwdData.password" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkNewPwd" :label-width="formLabelWidth">
          <el-input v-model.syncsync="pwdData.checkNewPwd" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="pwdFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="upDataPwd('pwdForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import {updateInfo, updatePwd, getStatistic} from '@/api/home'
  import {Message} from 'element-ui'

  export default {
    name: 'Home',
    created() {
      this.getStat();
      this.pwdData.orgId = this.updateInfo.orgId;
    },
    data() {
      const checkNewPwd = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.pwdData.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      }
      const CheckTel = (rule, value, callback) => {
        let tempValue = value * 1
        if (!value) {
          callback(new Error('请输入电话号码'));
        } else if (!Number.isInteger(tempValue)) {
          callback(new Error('电话号码必须是数字'));
        } else if (value.toString().length != 11) {
          callback(new Error('电话号码必须是11位'));
        } else {
          callback();
        }
      }
      return {
        previewlist: [
          {
            src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1526966605244&di=b071d66273e7567eeb6241a09dd0060e&imgtype=0&src=http%3A%2F%2Fpic25.photophoto.cn%2F20121220%2F0036036800277861_b.jpg',
          }
        ],
        staticData: {
          'noReceiveNo': '',
          'noreadNo': ''
        },
        pwdData: {
          oldPwd: '',
          password: '',
          checkNewPwd: '',
        },
        infoFormVisible: false,
        pwdFormVisible: false,
        formLabelWidth: '120px',
        pwdRules: {
          oldPwd: [
            {required: true, message: '请输入原始密码', trigger: 'blur'},
            {max: 16, message: '原始密码长度不能大于16位', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '请输入密码', trigger: 'blur'},
            {min: 6, message: '密码长度不能小于6位', trigger: 'blur'},
            {max: 16, message: '密码长度不能大于16位', trigger: 'blur'}
          ],
          checkNewPwd: [
            {validator: checkNewPwd, trigger: 'blur'}
          ]
        },
        userRules: {
          orgName: [
            {required: true, message: '请输入用户名', trigger: 'blur'}
          ],
          email: [
            {required: true, message: '请输入邮箱', trigger: 'blur'},
          ],
          phone: [
            {validator: CheckTel, trigger: 'blur'}
          ]
        }
      }
    },
    computed: {
      ...mapGetters([
        'updateInfo'
      ])
    },
    methods: {
      getStat() {
        getStatistic(this.updateInfo.orgId).then(res => {
          let data = res.data;
          this.staticData['noReceiveNo'] = data.noReceiveNo;
          this.staticData['noreadNo'] = data.noreadNo;
        })
      },
      cancledialog(userForm) {
        //重置表单
        this.$refs[userForm].resetFields();
      },
      upDataPwd(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            updatePwd(this.pwdData).then(() => {
              this.pwdFormVisible = false;
              this.$message.success('修改成功')
            }).catch(res => {
              this.$message.error('修改失败,请确认您的原始密码')
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        })
      },
      update(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$store.dispatch('UpdateInfo', this.updateInfo).then(() => {
              this.infoFormVisible = false;
              window.location.reload();
            }).catch(res => {
              console.log("error in this")
              Message.error(res)
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        })
      }
    }
  }
</script>

<style type="text/scss" lang="scss" scoped>
  #home {
    .InfoList {
      height: 30px;
      width: 100%;
      margin-left: 20px;
      margin-bottom: 10px;
      .textItem {
        display: inline-block;
        width: 50px;
        text-align: right;
      }
      .textValue {
        margin-left: 50px;
      }
    }
    .button-group {
      padding-left: 20px;
    }
    .box-card {
      margin: 0 auto;
      width: 50%;
    }

    .footer {
      margin-top: 30px;
      .item {
        float: left;
        width: 48%;
        padding: 5px 10px;
        border: 1px solid #999;
        .item-left {
          width: 80px;
          height: 80px;
          border: 1px solid #666;
          display: inline-block;
          background-color: #eee;
          border-radius: 50%;
          float: left;
          text-align: center;
          i {
            line-height: 80px;
            font-size: 40px;
          }
        }
        .item-right {
          display: inline-block;
          float: left;
          text-align: center;
          margin-left: 30px;
        }
      }
      .item:nth-child(2) {
        float: right;
      }
    }
  }
</style>
